<template>
  <div class="container">
    <el-card class="box-card">
      <el-row :column="4">
        <el-form :inline="true" :model="form">
          <el-col :span="6">
            <el-form-item :label="$t('route.tags')">
              <el-input v-model="query.tags" placeholder="请输入" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('route.city')">
              <el-select
                placeholder="请选择"
                v-model="query.province"
                @change="loadingPlaceList"
                size="small"
              >
                <el-option
                  v-for="(item, index) in form.cityList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('route.city')">
              <el-select v-model="query.city" placeholder="请选择" size="small">
                <el-option
                  v-for="(item, index) in form.palceList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('table.EnterpriseName')">
              <el-input
                v-model="query.shortName"
                placeholder="请输入"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="status" :label="$t('table.state')">
              <el-select v-model="query.state" placeholder="请选择" size="small">
                <el-option
                  v-for="(item, index) in form.status"
                  :key="index"
                  :label="item.value"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button size="mini" @click="onClear">{{$t("route.reset")}}</el-button>
              <el-button type="primary" size="mini" @click="onSearch">{{$t("table.search")}}</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="6" />
          <el-col :span="6">
            <el-form-item  >
              <el-button type="success" size="mini" @click="addCompany"
                >{{$t("table.addEnterprise")}}</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-alert
        :title="`共${total}条记录`"
        type="info"
        show-icon
        :closable="false"
      ></el-alert>
      <!-- 表格区 -->
      <el-table
        :data="companyData"
        style="width: 100%;margin-top:20px"
        v-loading="loading"
        element-loading-text="给我一点时间"
         highlight-current-row
        :header-cell-style="{ background: '#FAFAFA' }"
      >
        <el-table-column prop="id" :label="$t('table.id')" width="100"> </el-table-column>
        <el-table-column prop="number" :label="$t('table.number')" width="150"> </el-table-column>
        <el-table-column prop="shortName" :label="$t('table.EnterpriseName')" width="134"></el-table-column>
        <el-table-column prop="tags" :label="$t('route.tags')" width="134"> </el-table-column>
        <el-table-column prop="username" :label="$t('table.creator')" width="134"></el-table-column>
        <el-table-column prop="addDate" :label="$t('table.creatdate')">
          <template slot-scope="{ row }">
            {{ row.addDate | format }}
          </template>
        </el-table-column>
        <el-table-column prop="remarks" :label="$t('table.remarks')" width="134"> </el-table-column>
        <el-table-column prop="state" :label="$t('table.state')" width="134">
          <template slot-scope="{ row }">
            {{ row.state === 0 ? "禁用" : "启用" }}
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('table.actions')" width="180">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              @click="onEdit(row)"
            ></el-button>
            <el-button
              :type="row.state === 0 ? 'success' : 'warning'"
              :icon="row.state === 0 ? 'el-icon-check' : 'el-icon-close'"
              circle
              plain
              @click="onCheck(row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="onDelete(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码区 -->
      <el-pagination
      style="text-align:right;margin-top:10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="query.pagesize"
        :total="total"
        layout="sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>
    <!-- 弹层区 -->
    <companys-add
      v-model="dialogFormVisible"
      :titleInfo="titleInfo"
      :formBase="formBase"
      @loaingNewData="loaingNewData"
    />
  </div>
</template>

<script>
import { list, disabled, remove } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import companysAdd from '../components/companys-add.vue'
export default {
  components: { companysAdd },
  data () {
    return {
      form: {
        cityList: [],
        palceList: [],
        status: [
          {
            id: '0',
            value: '启用'
          },
          {
            id: '1',
            value: '禁用'
          }
        ]
      },
      total: 18,
      companyData: [],
      query: {
        page: 1,
        pagesize: 10,
        tags: '',
        province: '',
        city: '',
        shortName: '',
        state: ''
      },
      changeStateText: {
        id: '',
        state: ''
      },
      delText: {
        id: ''
      },
      dialogFormVisible: false,
      titleInfo: {
        text: '',
        pageTitle: ''
      },
      formBase: {},
      loading: true
    }
  },

  created () {
    this.query = {}
    this.loadingCompanyDetail()
  },

  methods: {
    handleSizeChange (val) {
      this.query.pagesize = val
      this.loadingCompanyDetail(this.query)
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.loadingCompanyDetail(this.query)
    },
    async loadingCompanyDetail () {
      const res = await list(this.query)
      this.total = res.data.counts
      this.companyData = res.data.items
      this.form.cityList = provinces()
      this.loading = false
    },
    loadingPlaceList (val) {
      this.form.palceList = citys(val)
      this.query.city = this.form.palceList[0]
    },
    onEdit (row) {
      this.dialogFormVisible = true
      this.titleInfo.text = '修改'
      this.titleInfo.pageTitle = '用户'
      this.formBase = { ...row }
    },
    onCheck (row) {
      this.changeStateText.id = row.id
      if (row.state === 0) {
        this.changeStateText.state = 1
      } else {
        this.changeStateText.state = 0
      }
      this.$confirm(`将${row.state === 0 ? '启用' : '禁用'},是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await disabled(this.changeStateText)
          this.loadingCompanyDetail()
          this.$message({
            type: 'success',
            message: `已成功${row.state === 0 ? '启用' : '禁用'}!`
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: `已取消${row.state === 0 ? '启用' : '禁用'}!`
          })
        })
    },
    onDelete (row) {
      this.delText.id = row.id
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (this.companyData.length === 1 && this.query.page !== 1) {
            this.query.page--
          }
          await remove(this.delText)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.loadingCompanyDetail()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    onClear () {
      this.query = {}
      this.loadingCompanyDetail()
    },
    async onSearch () {
      const { data } = await list(this.query)
      this.companyData = data.items
      this.total = data.counts
    },
    addCompany () {
      this.formBase = {}
      this.dialogFormVisible = true
      this.titleInfo.text = '创建'
      this.titleInfo.pageTitle = '用户'
    },
    loaingNewData () {
      this.loadingCompanyDetail()
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 0 10px;
  margin: 10px 0;
}

.el-card__body {
  padding: 0 20px;
}
</style>
